import 'package:flutter/material.dart';

class BottomSheetDemo extends StatefulWidget {
  const BottomSheetDemo({super.key});

  @override
  State<BottomSheetDemo> createState() => _BottomSheetDemoState();
}

class _BottomSheetDemoState extends State<BottomSheetDemo> {
  final _bottomSheetScaffoldKey = GlobalKey<ScaffoldState>();
  var _selectedSheet = 0;
  _openBottomSheet() async{
    var value = await showModalBottomSheet(
        context: context,
        isDismissible: true, //点击空白返回功能
        barrierColor: Colors.grey.withOpacity(0.3),//空白处颜色
        backgroundColor: Colors.white, //背景颜色
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),//圆角
        builder: (context) {
          return SingleChildScrollView(
            child: Column(
              children: 
                List.generate(10, (index) => ListTile(title: Text('index=>$index'),onTap:(){
                  Navigator.pop(context, index);
                }))
              ,
            ),
          );
        });

    setState(() {
      _selectedSheet = value;
    });
  }

  _openBottomSheet2() {
    var state = _bottomSheetScaffoldKey.currentState;
    if (state != null) {
      state.showBottomSheet((context) {
        return BottomAppBar(
          child: Container(
            height: 90.0,
            width: double.infinity,
            padding: EdgeInsets.all(16.0),
            child: Row(
              children: const [
                Icon(Icons.pause_circle_filled_outlined),
                SizedBox(
                  width: 16.0,
                ),
                Text('01:30 / 03:30'),
                Expanded(
                    child: Text(
                  'Fix you - Coldplay',
                  textAlign: TextAlign.right,
                ))
              ],
            ),
          ),
        );
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _bottomSheetScaffoldKey, //key 一定要给 否则上边 _bottomSheetScaffoldKey 就是null
      appBar: AppBar(
        title: Text('BottomSheetDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('select index=>$_selectedSheet'),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  child: Text('Open BottomSheet1'),
                  onPressed: () {
                    _openBottomSheet();
                  },
                  style: ElevatedButton.styleFrom(
                      primary: Colors.blue,
                      onPrimary: Colors.red,
                      elevation: 4.0,
                      shape: StadiumBorder() //形状
                      ),
                ),
              ],
            ),
            ElevatedButton(
              child: Text('Open BottomSheet2'),
              onPressed: () {
                _openBottomSheet2();
              },
              style: ElevatedButton.styleFrom(
                  primary: Colors.blue,
                  onPrimary: Colors.red,
                  elevation: 4.0,
                  shape: StadiumBorder() //形状
                  ),
            )
          ],
        ),
      ),
    );
  }
}
